<template>
  <view 
    class="fu-gap"
    :style="{
      height: `${height}rpx`,
      backgroundColor: bgColor,
    }"
  ></view>
</template>

<script>
/**
 * fu-gap 间隔槽组件
 * @description 用于在元素之间创建固定大小的间隔
 * @property {Number} height - 间隔槽高度，单位rpx
 * @property {String} bgColor - 间隔槽背景色
 * @property {Number} marginTop - 上外边距，单位rpx
 * @property {Number} marginBottom - 下外边距，单位rpx
 */
export default {
  name: 'fu-gap',
  props: {
    height: {
      type: Number,
      default: 20
    },
    bgColor: {
      type: String,
      default: '#f5f5f5'
    },
    marginTop: {
      type: Number,
      default: 0
    },
    marginBottom: {
      type: Number,
      default: 0
    }
  }
}
</script>

<style lang="scss" scoped>
.fu-gap {
  width: 100%;
}
</style> 